    <template>
    <div class="container" ref="containerRef">
        <div class="item">
            <label class="item-title" for="username">用户名</label>
            <p><input class="item-input item-ordinary common" name="username" v-model="username" required></input></p>
        </div>
        <div class="item">
            <label class="item-title" for="password">密码</label>
            <p><input class="item-input item-ordinary common" type="password" name="password" v-model="password" required></input></p>
        </div>
        <div class="item">
            <label class="item-title" for="verificationCode">验证码</label>
            <div class="wrapper-code">
                <input class="item-input item-code common" name="verificationCode" v-model="imgCode" required></input>
                <img class="item-img common" :src="imgSrc" alt="验证码" @click="initCode"/>
            </div>
        </div>
        <div class="item">
            <button class="login-btn" @click="login">登录</button>
        </div>
        <!--   遮挡返回按钮     -->
        <div class="mask"></div>
    </div>
</template>

<script>
import {uuid} from '@/utils/util'
import md5 from 'md5'

export default {
    name: "index",
    data() {
        return {
            loginKey: uuid(),
            username: '',
            password: '',
            imgSrc: '',
            imgCode: ''
        }
    },
    mounted() {
        this.initCode()
    },
    methods: {
        // 登录
        login() {
            const params = {
                userType: '10',
                loginType: 'username',
                equipmentType: 'pc',
                loginKey: this.loginKey,
                imgCode: this.imgCode,
                userName: this.username,
                userPassword: md5(this.password),
            }
            this.$api.commonPost('/dyrl/sso/common/login', params).then(res => {
                const result = res.data
                if (result.code !== -1) {
                    sessionStorage.setItem('accessToken', result.result.accessToken);
                    this.$router.replace('/')
                } else {
                    alert(result.message)
                    this.initCode()
                }
            })
        },
        // 初始化图片验证码
        initCode() {
            this.imgSrc = '/dyrl/sso/common/getImgCode?loginKey=' + this.loginKey + '&time=' + new Date().getTime()
        }
    }
}
</script>

<style scoped>
p {
    margin: 0;
    padding: 0;
}

.container {
    width: 800px;
    padding: 20px;
    margin: 100px auto;
    box-sizing: border-box;
    background-color: rgba(15, 99, 158, 0.2);
    box-shadow: 7px 7px 7px #0666B8;
    border-radius: 8px;
}

.common {
    height: 50px;
    box-sizing: border-box;
    background-color: #fff;
    border-radius: 8px;
    border: 3px solid #0666B8;
    font-size: 20px;
}

.item {
    display: flex;
    width: 70%;
    flex-direction: column;
    margin: 40px auto;
}

.item .item-ordinary {
    width: 100%;
}

.item .item-code {
    width: 70%;
}

.item .item-img {
    width: 28%;
}

.item .item-title {
    color: #f5f5f5;
    font-size: 18px;
    font-weight: 600;
    text-align: left;
    margin: 0 0 3px 3px;
}

.item .item-input {
    padding: 20px;
    margin: 0;
}

.wrapper-code {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.login-btn {
    height: 50px;
    border: none;
    border-radius: 8px;
    background: linear-gradient(to top right, #0666B8, #03345C);
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
}

.mask {
    width: 90px;
    height: 50px;
    background-color: #000000;
    position: absolute;
    top: 40px;
    left: 0;
}
</style>